<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>

        <parent></parent>

    </div>
    <template id="myhead">
        <div>
            <h2>myhead--myhead---header</h2>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>parent--parent---父组件</h2>

            <hr>
            <childone :count="count" :my-msg="msg"></childone>
            <childtwo :msg="msg"></childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone-childone---子组件1</h2>
            <h2>count---{{count}}</h2>
            <h2>count---{{myMsg}}</h2>
            <h2>num---{{num}}</h2>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>childtwo-childtwo---子组件2</h2>
            <h2>msg---{{msg}}</h2>
        </div>
    </template>


    <script>
        Vue.component('myHead',{
            template:'#myhead'
        })

        Vue.component('parent',{
            template:'#parent',
            data(){
                return{
                    count:1000,
                    msg:'呵呵呵哒',
                    show:true
                }
            },

        })

        Vue.component('childone',{
            template:'#childone',
            props:['my-msg','count'],
            data(){
                return{
                    num:100
                }
            }
        })

        Vue.component('childtwo',{
            template:'#childtwo',
            props:{
                msg:String,
                show:Boolean
            }
        })


        const vm = new Vue({
            data:{
                title:'组件通信（父改子）'
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML=this.title;
            }
        }).$mount('#app')

    </script>
      <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        
        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs   指向这个子组件对象    
        c. 事件总线 (bus new Vue)
        d. events 事件   (emit on )
        e. vuex (最后一天) 

        2. 子组件访问父组件
        
        3. 兄弟组件之间的通信


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
    -->
</body>
</html>